<template>
    <div class="el-main">
      <el-breadcrumb separator="/">
          <el-button class="goto"   @click="gohome">首页</el-button> 
    </el-breadcrumb>
      <el-main>
        <div class="main-content">
          <h1></h1>
          <div class="greeting">
            <p>欢迎您!祝您今天过得开心!</p>
          </div>
          <div class="tables-info">
            <div v-for="(table) in tables" :key="table.id" class="table-item">
              <div class="table-item">
                <img src="../assets/img/icon／餐饮.png" alt="餐桌图片" class="table-image">
                <div class="table-details">
              <p>{{ table.serialNum }}</p>
              <p>{{ table.member }}人</p>
              <p>{{ table.statusd }}</p>
              <!-- 点餐按钮 -->
              <button type="warning" v-if="table.statusd !== '占用'" @click="orderMeal(table.id)">开始点餐</button>
              <!-- 根据需要添加更多信息 -->
            </div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </div>
</template>

<script>


export default ({

  data(){
    return {
      tables: [ ],
    }

  },
  mounted: function () {
    
    this.getMealData()
},
  methods:{


  
    async getMealData() {
      try {
        const response = await this.$http.get('/desk/getAllDesks')
        this.tables = response.data
      } catch (error) {
        console.error(error)
      }
    },

    async orderMeal(tableId) {
      try {
        this.$router.push('/order')
        
      } catch (error) {
        console.error(error)
      }
    },
    gohome(){
      this.$router.push('/')
    }
 
  }
})
</script>


<style scoped>
/*背景图 */
.el-main {
  background-image: url('../assets/img/main.jpg'); /* 替换为您的背景图像路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* 固定背景图像 */
  padding: 20px;
  height: 100vh; /* 使主体内容��满整个窗口高度 */

}

/*图标 */
.table-image {
  width: 100px; /* 或者使用 max-width 来适应不同屏幕尺寸 */
  height: auto;
  display: block; /* 使图片宽度不会超过其容器宽度 */
  margin: 0 auto; /* 居中显示图片 */
}

.main-content {
  text-align: center;
}

/*欢迎您字段 */
.greeting p {
  font-size: 30px;
  margin: 10px 0;
  color: #d1f62a;
}

/*每个座位 */
.tables-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 项目向左对齐 */
  margin-top: 20px;
  font-size: 25px;
  gap: 10px;
}

/*与右边间隔 */
.table-item {
  margin-right: 160px;
}

.table-item:last-child {
  margin-right: 0; /* 重置最后一个项目的右边距 */
}

/*座位字段 */
.table-details {
    color: #99b9e1;
}


/*按钮设置*/ 
.table-details button {
  background-color: #f27c0d !important; /* 按钮的初始颜色 */
  width: 99px; /* 设置按钮的宽度 */
  height: 40px; /* 设置按钮的高度 */
  padding: 10px 20px; /* 设置按钮的内边距，使按钮内部内容与边界有更多空间 */
  font-size: 14px; /* 设置按钮文本的大小 */
  line-height: 1; /* 确保文本高度与按钮高度一致 */
  border-radius: 5px; /* 设置按钮的圆角大小 */
  cursor: pointer; /* 鼠标悬停在按钮上时显示手形图标 */
}

.el-breadcrumb button {
  color: #faaa09; /* 文字的初始颜色 */
  border: none; /* 去掉边框 */
  background-color: transparent; /* 去掉背景色 */
  font-size: 20px; /* 文字的字体大小 */
  cursor: pointer; /* ��标���停在文字上时显示手形图标 */
}


/* 其他样式 */
</style>